<template>
    <div>
        <el-dialog :title="isAdd ? '添加管理员' : '修改管理员'" :model-value="isShow" center :before-close="handleClose">
            <el-form :model="userInfo" :rules="rules" label-width="100px" ref="ruleFormRef" class="demo-ruleForm">
                <el-form-item label="所属角色" prop="roleid">
                    <el-select v-model="userInfo.roleid" placeholder="请选择">
                        <el-option v-for="item in roleData" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="userInfo.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="userInfo.password"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="userInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="offCheck(ruleFormRef)">取 消</el-button>
                    <el-button type="primary" @click="addUser(ruleFormRef, isAdd)">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineExpose, computed } from "vue"
//引入了数据类型规则
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex"
// 引入接口地址
import { userLook, userAdd, userEdit } from "../../request/api"
import { lookup } from "dns";
let store = useStore()
// 接受父组件的参数
defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
const userInfo = ref({
    roleid: "",
    username: "",
    password: "",
    status: 1
})
//创建一个refs
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入管理员名称', trigger: 'blur' },
        { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
    ],
    roleid: [
        { required: true, message: '请输入所属角色', trigger: 'blur' },
    ]
})
//去定义 子父组件通信方法 创建自定义事件名称
let emit = defineEmits(["offCheck"])
//点击取消
const offCheck = (formEl: FormInstance | undefined) => {
    // 点击重置
    if (!formEl) return
    formEl.resetFields()
    emit("offCheck", false)
    userInfo.value = {
        roleid: "",
        username: "",
        password: "",
        status: 1
    }
}
// 点击确定
const addUser = async (formEl: FormInstance | undefined, isAdd: boolean) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isAdd) {
                //调用添加接口
                userAdd(userInfo.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: res.data.msg
                        })
                        // 重新渲染列表
                        store.dispatch("user/userList_Action")
                        store.dispatch("user/userCount_Action")
                        // 关闭弹框
                        offCheck(ruleFormRef.value)
                    }
                })
            } else {
                // 调用编辑接口
                userEdit(userInfo.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: res.data.msg
                        })
                        // 重新渲染列表
                        store.dispatch("user/userList_Action")
                        store.dispatch("user/userCount_Action")
                        // 关闭弹框
                        offCheck(ruleFormRef.value)
                    }
                })
            }
        }
    });
};
// 编辑数据回显
const lookUp = (uid: number) => {
    userLook({ uid }).then((res: any) => {
        userInfo.value = { ...res.data.list, uid, password: "" }
    })
}
defineExpose({
    lookUp
})
// 点击X关闭
const handleClose = (done: () => void) => {
    done()
    offCheck(ruleFormRef.value)
}
// 获取到角色列表
const roleData = computed(() =>
    store.getters["role/getRoleList"]
)
store.dispatch("role/roleList_Action")
</script>

<style scoped>
</style>
